<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<style type="text/css">
			body{
				background-color: white;
			}
			/*排序数字样式*/
			.top-index{
				color: red;
				font-size: 16px;
				font-style: italic;
				width: 30px;
				display: inline-block;
				margin-top: 40px;
				margin-bottom: 15px;
			}
			
			/*线的样式*/
			.line{
				width: 50px;
				height: 0.5px;
				background: #C4C4C4;
				display: inline-block;
				vertical-align: middle;
			}
			/*card样式*/
			.card{
				margin-left: 15px;
				margin-right: 15px;
				height: 120px;
				border: 1px solid #C4C4C4;
				border-radius: 2px;
				box-shadow: 0px 1px 5px #C4C4C4;
				padding: 15px;
				text-align: left;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">北美票房榜</h1>
		</header>
		<div class="mui-content" style="background: white;">
		    <ul id="list" style="list-style: none;padding-left: 1px;margin-top: 0px;background: white;">
			        	<li v-for="item in list" @click="open_detail(item)">
			        		<div style="text-align: center;">
			        			<div class="line"></div>
			        			<div class="top-index">{{item.sort}}</div>
			        			<div class="line"></div>
			        		</div>
			        		<div class="card">
			        			<img :src="item.cover" class="mui-pull-left" style="width: 70px;height: 95px;margin-right: 10px;"/>
			        			<div class="dark-big">{{item.title}}</div>
			        			<div style="line-height: 20px;">
			        				<span class="gray-small">豆瓣评分：</span><span class="orange-small">{{item.score}}分</span>
			        			</div>
			        			<span class="gray-small mui-ellipsis" style="display: block;line-height: 20px;">
			        				导演：{{item.directorsStr}}
			        			</span>
			        			<span class="gray-small mui-ellipsis" style="display: block;line-height: 20px;">
			        				演员：{{item.castsStr}}
			        			</span>
			        		</div>
			        		<span class="dark-medium" style="margin-left: 15px;margin-top: 10px;display: block;">票房{{item.box/10000}}万美元</span>
			        	</li>
			        </ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			var detailPage = null;
			//vue对象
			var movies = new Vue({
				el:'#list',
				data:{
					list:[]
				},
				methods:{
					open_detail:function(item){
						mui.fire(detailPage,'movieId',{
							id:item.id
						});
						detailPage.show('slide-in-right');
					}
				}
			});
			
			mui.plusReady(function(){
				detailPage = plus.webview.getWebviewById('movie-detail');
				if(!detailPage){
					detailPage = mui.preload({
						id:'movie-detail',
						url:'./movie-detail.html'
					});
				}
				//获取数据
				getData();
			})
			
			function getData(){
				//5+
				plus.nativeUI.showWaiting('加载中',{
					width:'100px',
					height:'100px'
				});
				mui.getJSON('http://api.douban.com/v2/movie/us_box',{
					
				},function(resp){
					plus.nativeUI.closeWaiting();
					movies.list = convert(resp);
				})
			}
			
			function convert(obj){
				var newItems = [];
				var items = obj.subjects;
				for(var i=0;i<items.length;i++){
					var item = items[i];
					//重组导演数据a / b / c
					var directorsStr = '';
					for(var k=0;k<item.subject.directors.length;k++){
						directorsStr += item.subject.directors[k].name;
						if(k != item.subject.directors.length - 1){
							directorsStr += '/';
						}
					}
					//演员数据
					var castsStr = '';
					for(var k=0;k<item.subject.casts.length;k++){
						castsStr += item.subject.casts[k].name;
						if(k != item.subject.casts.length - 1){
							castsStr += '/';
						}
					}
					newItems.push({
						sort:i + 1,
						id:item.subject.id,
						title:item.subject.title,
						cover:item.subject.images.medium,
						score:item.subject.rating.average,
						directorsStr:directorsStr,
						castsStr:castsStr,
						box:item.box
					});
				}
				return newItems;
			}
		</script>
	</body>

</html>